<template>
  <div class="main">

    <div class="layui-row content layui-col-space10">
      <div class="layui-col-md9">
        <div id="video">
          <video :src="videoSrc" ref="videoRef" loops="loops" controls="controls" style="width: 100%;height: 380px;">
          </video>
        </div>
        <div class="video-info" style="height: 60px;background-color: #F2F2F1;">
          <div class="ops">
                    <span title="点赞数12445" class="like">
                        <i class="fa fa-thumbs-up"></i>1.2万
                    </span>
            <span title="播放数" class="coin">
                        <canvas width="34" height="34" class="ring-progress" style="width:34px;height:34px;left:-3px;top:-3px;"></canvas>
                        <i class="fa fa-play-circle"></i>1.3万
                    </span>
            <span title="收藏人数" class="collect">
                        <canvas width="34" height="34" class="ring-progress" style="width:34px;height:34px;left:-3px;top:-3px;"></canvas>
                        <i class="fa fa-star"></i>1.2万
                    </span>
          </div>
        </div>
      </div>
      <div class="layui-col-md3 catalogue">
        <div class="layui-card">
          <div class="layui-card-header">
            章节目录
          </div>
          <div class="layui-card-body">
            <ul>
              <li class="list-item"
                  :class="clickIndex==index ? 'video_active' : ''"
                  v-for="(item,index) in videoList" :key="item.id"
                  @click="clickItem(item.href, index)">
                  <span>第{{index+1}}章 </span>{{ item.name }}
              </li>
            </ul>
          </div>
          <div class="layui-card-body">

          </div>
        </div>
      </div>
    </div>
    <div class="layui-clear"></div>
    <hr class="layui-bg-cyan">
    <div class="layui-row comment">
      <!--这里是评论区-->
      评价： <div id="test4"></div>
      <div class="commentbox">
        <textarea cols="20" rows="10" placeholder="来说几句吧......" class="mytextarea" id="content"></textarea>
        <div class="layui-btn layui-btn-normal pull-right" id="comment">评论</div>
      </div>
      <div class="comment-list">

      </div>
    </div>

  </div>
</template>

<script>
    export default {
        name: "Video",
        data(){
            return {
                clickIndex: 0,
                params: {}, // 路由参数
                videoSrc: '',
                videoList:[],
                api_url: 'http://www.xueyuanjiaoyu.com/api/'
            }
        },
        mounted(){
            this.params = this.$route.query
            this.getVideoUrl()
        },
        methods: {
            getVideoUrl(){
                this.$axios.get(this.api_url + 'home/kczs',{params: this.params}).then(res => {
                    this.videoList = res.data.data
                    res.data.data.forEach(item=>{
                        if (this.params.no == item.no){
                            this.videoSrc = item.href
                            setTimeout(()=>{
                                this.$refs.videoRef.play()
                            },50)

                        }
                    })
                })
            },
            clickItem(href,index){
                this.clickIndex = index
                this.videoSrc = href
                setTimeout(()=>{
                    this.$refs.videoRef.play()
                },50)
            }
        }
    }
</script>

<style scoped>
  .list-item{
    cursor: pointer;
    padding: 5px;
    font-size: 18px;
    line-height: 28px;
  }
.video_active{
  background-color: #ccc;
}
</style>
